/* 
 * 文章详细信息页
*/
import React, { Component } from 'react'
import BlogSider_container from '../../../../../containers/BlogSider_container'
import { withRouter } from 'react-router-dom'

import { Icon, Modal, Button } from 'antd';

import store from '../../../../../redux/store'
import { Provider } from 'react-redux'
import JoinButton from './JoinButton';
import CommentShow from './comment/CommentShow';
import avatorURL from '../../../../../images/profile photo.jpg'

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_lkly05pyxv9.js',
// });

class ArticleShow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            lineWidth: 0,
            loading: false,
            visible: false
        }
    }

    // 链接跳转到增加文章的页面
    handleAdd = () => {
        this.props.history.push("/edit/undefiend");
    }

    handleMouseOver = () => {
        const lineWidth = this.title.offsetWidth;
        this.setState({
            lineWidth
        });
    }

    handleMouseOut = () => {
        this.setState({
            lineWidth: 0
        });
    }

    // 以下三个函数均是模态框相关函数（删除）
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = () => {
        const { index } = this.props;
        this.setState({ loading: true });
        setTimeout(() => {
            this.setState({ loading: false, visible: false });
            // 传递index（索引）给LayoutContent，以便删除
            this.props.deleteAssignArticle(index);
        }, 2000);
    };

    handleCancel = () => {
        this.setState({ visible: false });
    };

    // 跳转到具体文章展示页面
    handleArticleClick = () => {
        const { id } = this.props;
        this.props.history.push(`/blog/${id}`);
    }

    render() {
        const { visible, loading } = this.state;
        const { article } = this.props;

        let avator = avatorURL;

        if (article) {
            avator = article['author']['avator'];
        }

        if (article) {
            const date = new Date(parseInt(article.time));
            const time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
            return (
                <div style={{
                    margin: '0 auto',
                    width: 1200
                }} className="removeFloat">
                    <Provider store={store}>
                        <BlogSider_container />
                    </Provider>
                    {/* <Sider/> */}
                    <div style={{
                        float: 'right',
                        width: 900
                    }}>
                        <div style={{
                            backgroundColor: '#fff',
                            borderBottom: '1px solid #DDDDDD',
                            position: 'relative'
                        }}>
                            <div
                                style={{
                                    fontSize: 30,
                                    marginLeft: 30,
                                    color: '#000',
                                    cursor: 'pointer'
                                }}
                                ref={(title) => this.title = title}
                                onMouseOver={this.handleMouseOver}
                                onMouseOut={this.handleMouseOut}
                                onClick={this.handleArticleClick}
                            >
                                {article.title}
                            </div>
                            <div style={{
                                height: 2,
                                width: (this.state.lineWidth),
                                backgroundColor: '#CCCCCC',
                                marginLeft: 30,
                                transitionDuration: '.3s'
                            }}></div>
                            <div style={{
                                position: 'absolute',
                                top: 20,
                                right: 20
                            }}>
                                <span className="anticon-portal anticonzengjia" style={{
                                    fontSize: 20,
                                    marginRight: 19
                                }} onClick={this.handleAdd} ></span>
                                <span className="anticon-portal anticonxiugai" style={{
                                    fontSize: 20,
                                    marginRight: 19
                                }} ></span>
                                <span className="anticon-portal anticonshanchu" style={{
                                    fontSize: 20,
                                    marginRight: 19
                                }} onClick={this.showModal} ></span>
                            </div>
                            <div style={{
                                marginLeft: 30,
                                marginTop: 10
                            }} className="removeFloat">
                                <img src={avator} alt="头像" width={48} height={48} style={{
                                    borderRadius: '50%',
                                    float: 'left'
                                }} />
                                <div style={{
                                    marginLeft: 30,
                                    float: 'left',
                                    color: 'grey'
                                }}>
                                    {article.author['nickname']}
                                </div>
                                <br />
                                <div style={{
                                    marginLeft: 30,
                                    float: 'left',
                                    color: 'grey'
                                }}>
                                    {time}
                                </div>
                            </div>
                            <div style={{
                                marginTop: 5,
                                marginLeft: 25
                            }}>
                                {article.content}
                            </div>
                            <JoinButton lastTime={article.time} />
                            <Modal
                                visible={visible}
                                title="删除文章"
                                onOk={this.handleOk}
                                onCancel={this.handleCancel}
                                footer={[
                                    <Button key="back" onClick={this.handleCancel}>
                                        取消
                                    </Button>,
                                    <Button key="submit" type="primary" loading={loading} onClick={this.handleOk} style={{
                                        backgroundColor: '#f00',
                                        border: '1px solid #f00'
                                    }}>
                                        删除
                                    </Button>,
                                ]}
                            >
                                <p>{`确认删除《${article.title}》？`}</p>
                            </Modal>
                            <CommentShow />
                        </div >
                    </div>
                </div>
            )
        } else {
            return <div></div>
        }
    }
}

export default withRouter(ArticleShow);